<template>
  <div
    :id="id" 
  />
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props:['id','chartdata','title'],
    data() {
      return {
        chart: null,
      }
    },
    mounted() {
      setTimeout(() => {
        this.draw()
      })
      window.addEventListener('resize', this.resizeChart)
    },
    activated() {
      if (this.chart) {
        this.resizeChart()
      }
    },
    methods: {
      resizeChart() {
        this.chart.resize()
      },
      draw() {
        const { title,id,chartdata } = this
        this.chart = echarts.init(document.getElementById(id))
        const option = {
          title:{
            text:title? title:'',
            x:'left',
          },
          tooltip: {
            trigger: 'item',
            // formatter:(item)=>{
            //   const { value } = item.data
            //   const name = item.treePathInfo.map(e=>e.name).join("-")
            //   return title + name+":"+value
            // }
          },
          series: [
            {
              // name: 'Access From',
              type: 'sunburst',
              radius: ['10%', '80%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 5,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                // position: 'left',
                // fontSize: '10',
                // fontWeight: 'bold',
              },
              // emphasis: {
              //   label: {
              //     show: true,
              //     formatter:e=>`${e.name}\n${e.value}`
              //   }
              // },
              data:chartdata,
            }
          ]
        }
        this.chart.setOption(option)
      },
    },
    destroyed() {
      window.removeEventListener('resize', this.resizeChart)
    }
  }
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
</style>